<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>客户关怀</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="../js/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="../js/axios.js"></script>
		<script src="../js/qs.js"></script>
		<script src="../js/jquery.min.js"></script>
	</head>
	<body>
		<br />
		<div id="bigbox">
			<div style="width: 100%;margin-left: 15px;display: block;" id="app1">
				<i class="el-icon-caret-right" style="line-height: 40px;margin-right: 5px; float: left;"></i>
				<template style="margin-top: 50px;">
					<el-select v-model="allcareinfor" @change="getSelectInfo()" filterable placeholder="全部数据" style="float: left;width: 120px; height: 60px;">
						<el-option v-for="item in allcareoptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</template>
				<i class="el-icon-search" style="line-height: 40px;float: left;margin-left: 10px; width: 50px; height: 50px;"></i>
				<!-- 搜索框 -->
				<div style="display: block;margin-left: -20px;float: left;">
					<el-input style="width: 200px;" placeholder="" v-model="caretheme">
						<el-button slot="append"  @click="searchTheme()" style="width: 100px;">关怀主题</el-button>
					</el-input>
				</div>
			</div>

			<!-- 统计删除 -->
			<div style="width: 100%;float: left;" id="app2">
				<div style="float: left;margin-left: 30px;">
					<p style="font-size: 13px;color: #333333;height: 30px;">客户关怀<!-- <a style="font-size: 12px;color: #807E7E;">&nbsp;共${page.total}条</a> --></p>
				</div>
				<div style="float: right;display: block;margin-right: 20px;margin-top: -10px;">
					<!-- 新建关怀 -->
					<el-button size="small" icon="el-icon-circle-plus" @click="getNew()" style="width: 80px;">&nbsp;新建</el-button>
					<!-- 遮罩层 -->
					<!-- fullscreen style="background-color: #E5E9F2;" -->
					<el-dialog title="客户关怀" :visible.sync="dialogFormVisible" width="70%" >
						<hr style="border: 0.5px solid #807E7E;margin: -15px 0px 15px;" />
						<el-form :model="careform" :rules="carerules" ref="careform" label-width="100px" class="demo-careform" style="height: 540px; margin-top: 35px;">
							<el-row style="margin-left: 20px; margin-bottom: 10px;">
								<el-col :span="22">
									<el-form-item label="客户">
										<el-select v-model="careform.custID" @clear="carecustidto()" @change="selectOnechange()" clearable filterable="" style="width: 100%;" remote="" reserve-keyword placeholder="请输入关键词" :remote-method="cumremoteMethod" :loading="cumloading">
											<i slot="prefix" class="el-input__icon el-icon-search"></i>
											<el-option v-for="item in allcustomer" :key="item.value" :label="item.label" :value="item.value"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row style="margin-left: 20px;margin-bottom: 10px;">
								<el-col :span="9">
									<el-form-item label="联系人" prop="contID">
										<el-select v-model="careform.contID" clearable @change="addMemoryDay()" filterable="" style="width: 100%;" remote="" reserve-keyword placeholder="请输入关键词" :remote-method="contactMethod" :loading="cumloading">
												<i slot="prefix" class="el-input__icon el-icon-search"></i>
												<el-option v-for="item in allcontact" :key="item.value" :label="item.label" :value="item.value"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="13">
									<el-form-item label="日期" prop="caredate" required :label-width="formLabelWidth">
										<el-date-picker type="date" placeholder="选择日期" v-model="careform.caredate" value-format="yyyy-MM-dd" style="width: 100%;" :picker-options="pickerOptions1"></el-date-picker>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row style="margin-left: 20px;margin-bottom: 10px;">
								<el-col :span="22">
									<el-form-item label="关怀主题" prop="caretheme" required>
										<el-input v-model="careform.caretheme" clearable type="textarea" autosize></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row style="margin-left: 20px;margin-bottom: 10px;">
								<el-col :span="9">
									<el-form-item label="执行人" prop="doname">
										<el-select v-model="careform.doname" clearable style="width: 100%;"
										 remote="" reserve-keyword placeholder="请选择" :remote-method="donameMethod" :loading="cumloading">
											<i slot="prefix" class="el-input__icon el-icon-search"></i>
											<el-option v-for="item in alldoname" :key="item.value" :label="item.label" :value="item.value"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="13">
									<el-form-item label="类型" prop="careclassity" :label-width="formLabelWidth">
										<span>
											<el-select v-model="careform.careclassity" clearable style="width: 100%;"
											 remote="" reserve-keyword placeholder="请选择" :remote-method="careclassityMethod" :loading="cumloading">
												<i slot="prefix" class="el-input__icon el-icon-search"></i>
												<el-option v-for="item in allcareclassity" :key="item.value" :label="item.label" :value="item.value"></el-option>
											</el-select>
											<!-- <el-tooltip content="Bottom center" placement="bottom">
												<div slot="content">数据字典</div>
												<i class="el-icon-document" id="newtoolone"></i>
											</el-tooltip> -->
										</span>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row style="margin-left: 20px;margin-bottom: 10px;">
								<el-col :span="9">
									<el-form-item label="关怀内容" prop="textcare">
										<el-input type="textarea" :autosize="{ minRows: 1 }" clearable placeholder="请输入内容" v-model="careform.textcare">
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="13">
									<el-form-item label="客户反馈" prop="custreturn" :label-width="formLabelWidth">
										<el-input type="textarea" :autosize="{ minRows: 1 }" clearable placeholder="请输入内容" v-model="careform.custreturn" style="margin-right: -50px;"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row style="margin-left: 20px;margin-bottom: 20px;">
								<el-col :span="22">
									<el-form-item label="备注" prop="textremark">
										<el-input type="textarea" :autosize="{ minRows: 1 }" clearable placeholder="" v-model="careform.textremark"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item style="float: right;margin-top: 40px;">
								<el-button @click="dialogFormVisible = false">取 消</el-button>
								<el-button type="primary" @click="submitForm('careform')">确定</el-button>
								<el-button @click="resetForm('careform')">重置</el-button>
							</el-form-item>
						</el-form>
					</el-dialog>

				</div>
			</div>

			<!-- 表单 -->
			<div id="app3" style="margin-left: 10px;">
				<template>
					<el-table ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange" :data="caretable"
					 border style="width: 100%;color: black;">
						<el-table-column type="selection" width="35" align="center">
						</el-table-column>
						<el-table-column prop="ID" show-overflow-tooltip width="80" label="ID" align="center">
						</el-table-column>
						<el-table-column prop="caretheme" show-overflow-tooltip label="关怀主题" align="center">
						</el-table-column>
						<el-table-column prop="careContacts" show-overflow-tooltip label="联系人" align="center">
						</el-table-column>
						<el-table-column prop="carecust" show-overflow-tooltip label="客户" align="center">
						</el-table-column>
						<el-table-column prop="caredate" label="日期" align="center">
						</el-table-column>
						<el-table-column prop="caretype" show-overflow-tooltip label="类型" align="center">
						</el-table-column>
						<el-table-column prop="carehasman" show-overflow-tooltip label="所有人" align="center">
						</el-table-column>
						<!-- <el-table-column prop="caredoman" show-overflow-tooltip label="执行人" align="center">
						</el-table-column> -->
						<el-table-column fixed="right" label="操作" width="100" align="center">
							<template slot-scope="scope">
								<el-tooltip content="Bottom center" placement="bottom">
									<div slot="content">删除</div>
									<i class="el-icon-delete" style="margin: 0px 10px;font-size: 17px;" @click="deletenew(scope.row.ID)"></i>
								</el-tooltip>
								<el-tooltip content="Bottom center" placement="bottom">
									<div slot="content">编辑</div>
									<i class="el-icon-edit"  @click="updatehandleClick(scope.row)" style="font-size: 17px;"></i>
								</el-tooltip>
								<el-dialog title="提示" :visible.sync="dialogDelete" width="30%" append-to-body >
					 	 			<span>你确定要删除吗？</span>
						  				<span slot="footer" class="dialog-footer">
						   				<el-button @click="dialogDelete = false">取 消</el-button>
						   				<el-button type="primary" @click="dialogDelete = false"  v-on:click="Delete" >确 定</el-button>
					 				</span>
								</el-dialog>
								<!-- 查看关怀信息 -->
								<div id="careform" style="width: 90px;display: block; float: left;margin-left: 15px;">
									<!-- Form -->
									<el-dialog title="客户关怀" :visible.sync="dialogFormVisible" width="70%" append-to-body>
										<hr style="border: 0.5px solid #807E7E;margin: -15px 0px 15px;" />
										<el-form :model="careform" :rules="carerules" ref="careform" label-width="100px" class="demo-careform" style="height: 540px; margin-top: 35px;">
											<el-row style="margin-left: 20px;margin-bottom: 10px;">
												<el-col :span="22">
													<el-form-item label="关怀主题" clearable prop="caretheme" required>
														<el-input v-model="careform.caretheme"></el-input>
													</el-form-item>
												</el-col>
											</el-row>
											<el-row style="margin-left: 20px; margin-bottom: 10px;">
												<el-col :span="22">
													<el-form-item label="客户">
														<el-select v-model="careform.custID" disabled @clear="carecustidto()" @change="selectOnechange()" clearable filterable="" style="width: 100%;" remote="" reserve-keyword placeholder="请输入关键词" :remote-method="cumremoteMethod" :loading="cumloading">
															<i slot="prefix" class="el-input__icon el-icon-search"></i>
															<el-option v-for="item in allcustomer" :key="item.value" :label="item.label" :value="item.value"></el-option>
													 	</el-select>
													</el-form-item>
												</el-col>
											</el-row>
											<el-row style="margin-left: 20px;margin-bottom: 10px;">
												<el-col :span="9">
													<el-form-item label="联系人" prop="contID">
														<el-select v-model="careform.contID" clearable @change="addMemoryDay()" filterable="" style="width: 100%;" remote="" reserve-keyword placeholder="请输入关键词" :remote-method="contactMethod" :loading="cumloading">
															<i slot="prefix" class="el-input__icon el-icon-search"></i>
															<el-option v-for="item in allcontact" :key="item.value" :label="item.label" :value="item.value"></el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span="13">
													<el-form-item label="日期" prop="caredate" required :label-width="formLabelWidth">
														<el-date-picker type="date" placeholder="选择日期" v-model="careform.caredate" value-format="yyyy-MM-dd" style="width: 100%;" :picker-options="pickerOptions1"></el-date-picker>
													</el-form-item>
												</el-col>
											</el-row>
											<el-row style="margin-left: 20px;margin-bottom: 10px;">
												<el-col :span="9">
													<el-form-item label="执行人" prop="doname">
														<el-select v-model="careform.doname" clearable style="width: 100%;"
														 remote="" reserve-keyword placeholder="请选择" :remote-method="donameMethod" :loading="cumloading">
															<i slot="prefix" class="el-input__icon el-icon-search"></i>
															<el-option v-for="item in alldoname" :key="item.value" :label="item.label" :value="item.value"></el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span="13">
													<el-form-item label="类型" prop="careclassity" :label-width="formLabelWidth">
														<span>
															<el-select v-model="careform.careclassity" clearable style="width: 100%;"
															 remote="" reserve-keyword placeholder="请选择" :remote-method="careclassityMethod" :loading="cumloading">
																<i slot="prefix" class="el-input__icon el-icon-search"></i>
																<el-option v-for="item in allcareclassity" :key="item.value" :label="item.label" :value="item.value"></el-option>
															</el-select>
															<!-- <el-tooltip content="Bottom center" placement="bottom">
																<div slot="content">数据字典</div>
																<i class="el-icon-document" id="newtooltwo"></i>
															</el-tooltip> -->
														</span>
													</el-form-item>
												</el-col>
											</el-row>
											<el-row style="margin-left: 20px;margin-bottom: 10px;">
												<el-col :span="9">
													<el-form-item label="关怀内容" prop="textcare" >
														<el-input type="textarea" :autosize="{ minRows: 1 }" clearable placeholder="请输入内容" v-model="careform.textcare">
														</el-input>
													</el-form-item>
												</el-col>
												<el-col :span="13">
													<el-form-item label="客户反馈" prop="custreturn" :label-width="formLabelWidth">
														<el-input type="textarea" :autosize="{ minRows: 1 }" clearable placeholder="请输入内容" v-model="careform.custreturn"
														 style="margin-right: -50px;"></el-input>
													</el-form-item>
												</el-col>
											</el-row>
											<el-row style="margin-left: 20px;margin-bottom: 20px;">
												<el-col :span="22">
													<el-form-item label="备注" prop="textremark">
														<el-input type="textarea" :autosize="{ minRows: 1 }" clearable placeholder="" v-model="careform.textremark"></el-input>
													</el-form-item>
												</el-col>
											</el-row>
											<el-form-item style="float: right;margin-top: 40px;">
												<el-button @click="dialogFormVisible = false">取 消</el-button>
												<el-button type="primary" @click="submitForm('careform')">确定</el-button>
												<el-button @click="resetForm('careform')">重置</el-button>
											</el-form-item>
										</el-form>
									</el-dialog>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<div style="margin-top: 10px">
						<div style="display: block; float: left;margin-left: 5px;">
							<!-- <el-tooltip content="Bottom center" placement="bottom">
								<div slot="content">批量删除</div>
								<i class="el-icon-delete" style="margin: 8px;font-size: 17px;"></i>
							</el-tooltip> -->
						</div>
						<!-- 分页 -->
						<div style="display: block; float: left; margin-left: 20%;">
							<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :pager-count="5"
							 :page-sizes="[4, 6, 10, 20]" :page-size="${page.pageSize}" layout="total, sizes, prev, pager, next, jumper" :total="${page.total}">
							</el-pagination>
						</div>
						<div style="display: block; float: right;margin-right: 3%;">
							<!-- <el-tooltip content="Bottom center" placement="bottom">
								<div slot="content">打印</div>
								<el-button circle size="mini"><i class="el-icon-printer" style="font-size: 17px;"></i></el-button>&nbsp;
							</el-tooltip> -->

							<el-tooltip content="Bottom center" placement="bottom">
								<div slot="content">导出Excel</div>
								<el-button circle size="mini" @click="downloadfile"><i class="el-icon-tickets" style="font-size: 17px;"></i></el-button>
							</el-tooltip>

						</div>
					</div>
				</template>
			</div>
		</div>
		<script type="text/javascript">
			// 获取所有的客户关怀
			var carelist = ${list};
			var pageinfo = ${pageinfo};
		</script>
		<script type="text/javascript">
		var Main = {
				data() {
					return {
						allcareoptions: [{
							value: '0',
							label: '全部数据'
						}, {
							value: '1071',
							label: '生日'
						}, {
							value: '1072',
							label: '回访'
						}, {
							value: '1073',
							label: '待办任务'
						}],
						allcareinfor: '',
						caretheme: ''
					}
				},
				methods:{
					//根据选项获取表单数据
					getSelectInfo(){
							//页大小
						var pageSize= Max.pasSize;
						//查询条件状态
						var statueID=null;
						//关怀主题
						var search=null;
						//表单对象
						var MainFromnew= MainFrom;
						console.log("搜索数据："+this.allcareinfor.toString());
						if(this.allcareinfor.toString()== "0" ){
							window.location.hash='#/aftersale/care';
						}else{
							window.location.hash='#/aftersale/care?statueID='+this.allcareinfor;
							statueID=this.allcareinfor;
						}
						this.caretheme='';
						$.ajax({
								type: "post",
								url: "/aftersale/care",
								data: {pageNum:1,pageSize:pageSize,statueID:statueID,search:search},
								success: function (getPage) {
										console.log("页数："+JSON.stringify(getPage));
										MainFromnew.caretable=getPage.list;
										MainFromnew.pages=getPage;
										MainFromnew.currentPage4=getPage.pageNum;
								}
						});
					},
						//根据关怀主题搜索
					searchTheme(){
						//页大小
						var pageSize= Max.pasSize;
						//查询条件状态
						var statueID=null;
						//关怀主题
						var search=null;
						//表单对象
						var MainFromnew= MainFrom;
						var MainTwoNew=MainTwo;
						console.log(this.allcareinfor.toString());
						console.log("关怀主题:"+this.caretheme.toString());
						//判断是否根据条件筛选
						if(this.allcareinfor.toString()=='0'||this.allcareinfor.toString()==''){
							if(this.caretheme==""){
								window.location.hash='#/aftersale/repair'
							}
							else{
								window.location.hash='#/aftersale/repair?search='+this.caretheme;
								search=this.caretheme;
							}
						}else{
							statueID=this.allcominfor;
							if(this.caretheme==""){
								window.location.hash=window.location.hash.split('&')[0];
							}
							else{
								window.location.hash=window.location.hash.split('&')[0]+'&search='+this.caretheme;
								search=decodeURI(this.caretheme);
							}
						}
						$.ajax({
								type: "post",
								url: "/aftersale/care",
								data: {pageNum:1,pageSize:pageSize,statueID:statueID,search:search},
								success: function (getPage) {
										console.log("页数："+JSON.stringify(getPage));
										MainFromnew.caretable=getPage.list;
										MainFromnew.pages=getPage;
										MainTwoNew.getNewPage=getPage;
										MainFromnew.currentPage4=getPage.pageNum;
								}
						});
					},
				},
				mounted:function(){
						var url= window.location.href;
						var url1= url.indexOf("?");
						if(url1!=-1){
							//截取每一个条件
							var urlcondition= url.substring(url1+1,url.length).split('&');
							for(var i=0;i<urlcondition.length;i++){
								
								if(urlcondition[i].split('=')[0]=="statueID"){
									this.allcareinfor=decodeURI(urlcondition[i].split('=')[1]);
								}
								if(urlcondition[i].split('=')[0]=="search"){
									this.caretheme=decodeURI(urlcondition[i].split('=')[1]);
								}
							}
						}
					}
			}
			var Ctor = Vue.extend(Main)
			new Ctor().$mount('#app1')


			/* 遮罩层 */
			var MainTwo = new Vue({
				el:"#app2",
				data: {
						allmemoryDay:[],
						allcustomer:[],
						allcustomers:[],
						allcontact:[],
						allcontacts:[],
						alldoname:[],
						alldonames:[],
						allcareclassity:[],
						allcareclassities:[],
						formLabelWidth: "300px",
						careform: {
							ID:'',
							caretheme: '',
							custID: '',
							contID: '',
							caredate: new Date(),
							doname: '',
							careclassity: '',
							textcare: '',
							custreturn: '',
							textremark: '',
						},
						dialogFormVisible: false,
						cumloading:false,
						carerules: {
							caretheme: [{required: true,message: '请输入关怀主题',trigger: 'change'},{required: true,message: '请输入关怀主题',trigger: 'blur'}],
							caredate: [{required: true,message: '请选择日期',trigger: 'change'},{required: true,message: '请选择日期',trigger: 'blur'}]
						},
						/* 关怀日期选择 */
						pickerOptions1: {
							disabledDate(time) {
								return time.getTime() < Date.now();
							},
							shortcuts: [{
								text: '今天',
								onClick(picker) {
									picker.$emit('pick', new Date());
								}
							}, {
								text: '明天',
								onClick(picker) {
									const date = new Date();
									date.setTime(date.getTime() + 3600 * 1000 * 24);
									picker.$emit('pick', date);
								}
							}, {
								text: '一周后',
								onClick(picker) {
									const date = new Date();
									date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
									picker.$emit('pick', date);
								}
							}]
						},
				},
				methods: {
					querySearchAsync(queryString, cb) {
						var restaurants = this.restaurants;
						var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

						clearTimeout(this.timeout);
						this.timeout = setTimeout(() => {
							cb(results);
						}, 3000 * Math.random());
					},
					createStateFilter(queryString) {
						return (state) => {
							return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
						};
					},
					handleSelect(item) {
						console.log(item);
					},
					mounted() {
						this.restaurants = this.loadAll();
					},
					 //加载界面客户
					cumremoteMethod(query) {
						var _this=this;
					      if (query !== '') {
					        this.cumloading = true;
					        setTimeout(() => {
					          this.cumloading = false;
					          this.allcustomer = _this.allcustomers.filter(item => {
					            return item.label.toLowerCase()
					              .indexOf(query.toLowerCase()) > -1;
					          });
					        }, 200);
					      } else {
					        this.uosign = [];
					      }
					    },
					//清除客户
					carecustidto(){
						var _this=this;
						_this.allcustomer=_this.allcustomers;
					},
					//加载界面联系人
					contactMethod(query) {
						var _this=this;
						if (query !== '') {
							this.cumloading = true;
							setTimeout(() => {
								this.cumloading = false;
								this.allcontact = _this.allcontacts.filter(item => {
									return item.label.toLowerCase()
									.indexOf(query.toLowerCase()) > -1;
								});
							}, 200);
						} else {
							this.uosign = [];
						}
					},
					//加载界面执行人
					donameMethod(query) {
						var _this=this;
						if (query !== '') {
							this.cumloading = true;
							setTimeout(() => {
								this.cumloading = false;
								this.alldoname = _this.alldonames.filter(item => {
									return item.label.toLowerCase()
									.indexOf(query.toLowerCase()) > -1;
								});
							}, 200);
						} else {
							this.uosign = [];
						}
					},
					//加载界面客户关怀类型
					careclassityMethod(query) {
						var _this=this;
						if (query !== '') {
							this.cumloading = true;
							setTimeout(() => {
								this.cumloading = false;
								this.allcareclassity = _this.allcareclassities.filter(item => {
									return item.label.toLowerCase()
									.indexOf(query.toLowerCase()) > -1;
								});
							}, 200);
						} else {
							this.uosign = [];
						}
					},
					//获取数据
					getNew(){
						var _this=this;
						this.dialogFormVisible=true;
						axios.post("/aftersale/chooseCareOptions",

						).then(function(v) {
								console.log("回调成功，获取了服务器端返回的值v");
								console.log(v);
								console.log("234543332");
								//获取客户
								_this.allcustomer= v.data.customerInfo.map(item => {
									return { value: item.ID, label: item.name };
								});
								_this.allcustomers=_this.allcustomer;
								console.log(_this.allcustomers);
								//获取执行人
								console.log(v.data.careClassifyInfo);
								_this.alldoname= v.data.userInfo.map(item => {
									return { value: item.ID, label: item.name };
								});
								_this.alldonames=_this.alldoname;
								//获取当前登录用户
								_this.careform.doname=v.data.user.uId;
								//获取分类
								_this.allcareclassity= v.data.careClassifyInfo.map(item => {
									return { value: item.dictId, label: item.dictName };
								});
								_this.allcareclassities=_this.allcareclassity;
							})/*.catch(function() {
								alert("出错了");
							})*/;
					},
					//清除客户及其对应联系人
					carecustidto(){
						var _this=this;
						_this.allcustomer=_this.allcustomers;
						_this.careform.custID='';
						_this.careform.contID='';
					},
					//清空联系人
					comcontidto(){
						var _this=this;
						_this.allcontact=_this.allcontacts;
						_this.careform.contID='';
					},
					//选择客户查询对应的联系人
					selectOnechange(){
						//选择客户加载联系人及联系人纪念日
						var _this=this;
						axios.post("/aftersale/custTocon",
						Qs.stringify({
						'custid':_this.careform.custID
						}
						,{arrayFormat: 'brackets'})
						).then(function(v){					          				
						console.log("回调成功!");
						console.log(v.data.comcustmanid);
						_this.allcontact= v.data.comcustmanid.map(item => {
							return { value: item.ID, label: item.name };
						}); 
							_this.addcontel=v.data.comcustmanid;
						})/*.catch(function(){
						  console.log("信息出错了");
						})*/;			
					},
					//选择联系人加载纪念日
					addMemoryDay(){
							var _this=this;
							axios.post("/aftersale/conToMemory",
							Qs.stringify({
								'conid':_this.careform.contID
							}
							,{arrayFormat: 'brackets'})
							).then(function(v){					          				
							console.log("联系人纪念日：");
							console.log(v.data.conToMemory);
							//_this.allmemoryDay=v.data.comcustmanid.mtype;
								//纪念日
							_this.careform.caretheme=v.data.conToMemory.mtype;
							//生日
							_this.careform.caredate=v.data.conToMemory.merDay;
							});		
					},
					submitForm(careform) {
						var _this=this;
						console.log(_this.careform);
						this.$refs[careform].validate((valid) => {
							if (valid) {
								//post提交数据
								axios.post("/aftersale/addCare",
									//参数转换
									Qs.stringify(this.careform, {
										arrayFormat: 'brackets'
									})
									//id:
									//ajax请求成功的回调函数
								).then(function(v) {
									console.log("回调成功，获取了服务器端返回的值v");
									console.log(v);
									  _this.$message({
					          showClose: true,
										type: 'success',
										message: '添加成功!',
										duration:3000,
										center: true
									});
					           		//延时两秒刷新
					           		setTimeout(function (){
													_this.dialogFormVisible=false;
					           			showAtRight('/aftersale/care');
					           		}, 2000);
								}).catch(function() {
									//alert("出错了");
									_this.$message({
					           			showClose: true,
										type: 'success',
										message: '添加失败!',
										duration:3000,
										center: true
									});
								});
							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
						resetForm(formName) {
							this.$refs[formName].resetFields();
						}
					}
				})



			/*  表单  */
			var MainFrom=new Vue({
				el:"#app3",
				data:{
						allcustomer:[],
						allcustomers:[],
						allcontact:[],
						allcontacts:[],
						alldoname:[],
						alldonames:[],
						allcareclassity:[],
						allcareclassities:[],
						caretable:carelist,
						pages: pageinfo,
						currentPage4: pageinfo.pageNum,
						multipleSelection: [],
						dialogFormVisible: false,
						dialogDelete: false,
						cumloading:false,
						formLabelWidth: "300px",
						careform: {
							ID:"",
							caretheme: '',
							custID: '',
							contID: '',
							caredate: '',
							doname: '',
							careclassity: '',
							textcare: '',
							custreturn: '',
							textremark: '',
						},
						carerules: {
							caretheme: [{required: true,message: '请输入关怀主题',trigger: 'change'},{required: true,message: '请输入关怀主题',trigger: 'blur'}],
							caredate: [{required: true,message: '请选择日期',trigger: 'change'},{required: true,message: '请选择日期',trigger: 'blur'}]
						},
						/* 关怀日期选择 */
						pickerOptions1: {
							disabledDate(time) {
								return time.getTime() < Date.now();
							},
							shortcuts: [{
								text: '今天',
								onClick(picker) {
									picker.$emit('pick', new Date());
								}
							}, {
								text: '明天',
								onClick(picker) {
									const date = new Date();
									date.setTime(date.getTime() + 3600 * 1000 * 24);
									picker.$emit('pick', date);
								}
							}, {
								text: '一周后',
								onClick(picker) {
									const date = new Date();
									date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
									picker.$emit('pick', date);
								}
							}]
						},
				},
				methods: {
					handleClick(row) {
						console.log(row);
					},
					handleSelectionChange(val) {
						this.multipleSelection = val;
					},
					handleSizeChange(val) {
							//页大小
							Max.pasSize= val;
							//查询条件状态
							var statueID=null;
							//关怀主题
							var search=null;
							var MainFromnew = MainFrom;
							var MainTwoNew=MainTwo;
							//判断是否带条件;
							var url= window.location.href;
							var url1= url.indexOf("?");
							if(url1!=-1){
								//截取条件
								var urlcondition= url.substring(url1+1,url.length).split('&');
								for(var i=0;i<urlcondition.length;i++){
									
									if(urlcondition[i].split('=')[0]=="statueID"){
										statusid=decodeURI(urlcondition[i].split('=')[1]);
									}
									if(urlcondition[i].split('=')[0]=="search"){
										search=decodeURI(urlcondition[i].split('=')[1]);
									}
								}
							}
							$.ajax({
									type: "post",
									url: "/aftersale/care",
									data: {pageNum:1,pageSize:val,statueID:statueID,search:search},
									success: function (getPage) {
											console.log("页数："+JSON.stringify(getPage));
											MainFromnew.caretable=getPage.list;
											MainFromnew.pages=getPage;
											MainTwoNew.getNewPage=getPage;
											MainFromnew.currentPage4=getPage.pageNum;
									}
							});
					},
					handleCurrentChange(val) {
							//页大小
							var pageSize= Max.pasSize;
							//查询条件状态
							var statueID=null;
							//投诉主题
							var search=null;
							var MainFromnew = MainFrom;
							//判断是否带条件;
							var url= window.location.href;
							var url1= url.indexOf("?");
							if(url1!=-1){
								//截取条件
								var urlcondition= url.substring(url1+1,url.length).split('&');
								for(var i=0;i<urlcondition.length;i++){
									
									if(urlcondition[i].split('=')[0]=="statueID"){
										statusid=decodeURI(urlcondition[i].split('=')[1]);
									}
									if(urlcondition[i].split('=')[0]=="search"){
										search=decodeURI(urlcondition[i].split('=')[1]);
									}
								}
							}
							$.ajax({
									type: "post",
									url: "/aftersale/care",
									data: {pageNum:1,pageSize:pageSize,statueID:statueID,search:search},
									success: function (getPage) {
											console.log("页数："+JSON.stringify(getPage));
											MainFromnew.caretable=getPage.list;
											MainFromnew.pages=getPage;
											MainFromnew.currentPage4=getPage.pageNum;
									}
							});
					},
					querySearchAsync(queryString, cb) {
						var restaurants = this.restaurants;
						var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

						clearTimeout(this.timeout);
						this.timeout = setTimeout(() => {
							cb(results);
						}, 3000 * Math.random());
					},
					createStateFilter(queryString) {
						return (state) => {
							return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
						};
					},
					handleSelect(item) {
						console.log(item);
					},
					mounted() {
						this.restaurants = this.loadAll();
					},
					//加载界面客户
					cumremoteMethod(query) {
						var _this=this;
					      if (query !== '') {
					        this.cumloading = true;
					        setTimeout(() => {
					          this.cumloading = false;
					          this.allcustomer = _this.allcustomers.filter(item => {
					            return item.label.toLowerCase()
					              .indexOf(query.toLowerCase()) > -1;
					          });
					        }, 200);
					      } else {
					        this.uosign = [];
					      }
					    },
					//清除客户及其对应联系人
					carecustidto(){
						var _this=this;
						_this.allcustomer=_this.allcustomers;
						_this.careform.custID='';
						_this.careform.contID='';
					},
					//清空联系人
					comcontidto(){
						var _this=this;
						_this.allcontact=_this.allcontacts;
						_this.careform.contID='';
					},
					//选择客户查询对应的联系人
					selectOnechange(){
						//选择客户加载联系人
						var _this=this;
						axios.post("/aftersale/custTocon",
						Qs.stringify({
						'custid':_this.careform.custID
						}
						,{arrayFormat: 'brackets'})
						).then(function(v){					          				
						console.log("回调成功，获取了服务器端返回的值v");
						console.log("客户对应联系人信息："+v.data.comcustmanid);
						_this.allcontact= v.data.comcustmanid.map(item => {
							return { value: item.ID, label: item.name };
						}); 
							_this.addcontel=_this.allcontact;
						//_this.orderes
						})/*.catch(function(){
						  console.log("信息出错了");
						})*/;			
					},
					//选择联系人加载纪念日
					addMemoryDay(){
							var _this=this;
							axios.post("/aftersale/conToMemory",
							Qs.stringify({
								'conid':_this.careform.contID
							}
							,{arrayFormat: 'brackets'})
							).then(function(v){					          				
							console.log("联系人纪念日：");
							console.log(v.data.conToMemory);
							//_this.allmemoryDay=v.data.comcustmanid.mtype;
								//纪念日
							_this.careform.caretheme=v.data.conToMemory.mtype;
							//生日
							_this.careform.caredate=v.data.conToMemory.merDay;
							});		
					},
					//加载界面联系人
					contactMethod(query) {
						var _this=this;
						if (query !== '') {
							this.cumloading = true;
							setTimeout(() => {
								this.cumloading = false;
								this.allcontact = _this.allcontacts.filter(item => {
									return item.label.toLowerCase()
									.indexOf(query.toLowerCase()) > -1;
								});
							}, 200);
						} else {
							this.uosign = [];
						}
					},
					//加载界面执行人
					donameMethod(query) {
						var _this=this;
						if (query !== '') {
							this.cumloading = true;
							setTimeout(() => {
								this.cumloading = false;
								this.alldoname = _this.alldonames.filter(item => {
									return item.label.toLowerCase()
									.indexOf(query.toLowerCase()) > -1;
								});
							}, 200);
						} else {
							this.uosign = [];
						}
					},
					//加载界面客户关怀类型
					careclassityMethod(query) {
						var _this=this;
						if (query !== '') {
							this.cumloading = true;
							setTimeout(() => {
								this.cumloading = false;
								this.allcareclassity = _this.allcareclassities.filter(item => {
									return item.label.toLowerCase()
									.indexOf(query.toLowerCase()) > -1;
								});
							}, 200);
						} else {
							this.uosign = [];
						}
					},
					
					/**
					 * 打开遮罩层
					 */
					updatehandleClick(row) {
						this.dialogFormVisible = true;
						var _this = this;
						console.log(_this);
						console.log(row);
						axios.post("/aftersale/careOne",
							Qs.stringify( {
						   			'c_id':row.ID,
							   },{arrayFormat: 'brackets'}) 
						).then(function(v) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v.data);
							//获取客户
							_this.allcustomer= v.data.customerInfo.map(item => {
								return { value: item.ID, label: item.name };
							});
							_this.allcustomers=_this.allcustomer;
							//获取执行人
							console.log(v.data.careClassifyInfo);
							_this.alldoname= v.data.userInfo.map(item => {
								return { value: item.ID, label: item.name };
							});
							_this.alldonames=_this.alldoname;
							//获取分类
							_this.allcareclassity= v.data.careClassifyInfo.map(item => {
								return { value: item.dictId, label: item.dictName };
							});
							_this.allcareclassities=_this.allcareclassity;
							//传值
							_this.careform.ID=v.data.careInfo.ID;
							_this.careform.caretheme=v.data.careInfo.caretheme;
							_this.careform.custID=v.data.careInfo.cust_id;
							_this.careform.contID=v.data.careInfo.careConID;
							//获取联系人
							_this.selectOnechange();
							_this.careform.caredate=v.data.careInfo.caredate;
							_this.careform.doname=v.data.careInfo.care_userID;
							_this.careform.careclassity=v.data.careInfo.care_classity;
							_this.careform.textcare=v.data.careInfo.textcare;
							_this.careform.custreturn=v.data.careInfo.custreturn;
							_this.careform.textremark=v.data.careInfo.textremark;
							console.log("传值后："+JSON.stringify(_this.careform));
						})/* .catch(function() {
							alert("出错了");
						} )*/;
						this.dialogFormVisible = true;
					},
					//表单提交修改
					submitForm(careform) {
						var _this=this;
						console.log("修改信息："+JSON.stringify(_this.careform));
						this.$refs[careform].validate((valid) => {
							if (valid) {
								//post提交数据
								axios.post("/aftersale/updateCare",
									//参数转换
									Qs.stringify(_this.careform, {
										arrayFormat: 'brackets'
									})
									//id:
									//ajax请求成功的回调函数
								).then(function(v) {
									console.log("回调成功，获取了服务器端返回的值v");
									console.log(v);
									  _this.$message({
					           			showClose: true,
										type: 'success',
										message: '修改成功!',
										duration:3000,
										center: true
									});
					           		//延时两秒刷新
					           		setTimeout(function (){
													_this.dialogFormVisible=false;
					           			showAtRight('/aftersale/care');
					           		}, 2000);
								}).catch(function() {
									//alert("出错了");
									_this.$message({
					           			showClose: true,
										type: 'success',
										message: '修改失败!',
										duration:3000,
										center: true
									});
								});
							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					deletenew(ID){
						this.ID=ID;
						this.dialogDelete=true;
						
					},
					//删除方法
					Delete(){
						var _this=this;
						console.log(_this);
						axios.get("/aftersale/caredeleteone",
			           			//参数转换
			           			//Qs.stringify(this.form,{arrayFormat: 'brackets'})
			           			//ajax请求成功的回调函数
			           			{
									params:{
										ID:_this.ID
									}
			           			}
			          			).then(function(response){					          				
			           			console.log("回调成功，获取了服务器端返回的值v");
			           			console.log(response.data);					           		
			           		_this.restaurants=response.data;
			           		/*this.$message({
								type: 'success',
								message: '删除成功!'
							});*/
			           		//alert("删除成功！");

			           		_this.$message({
			           			showClose: true,
								type: 'success',
								message: '删除成功!',
								duration:3000,
								center: true
							});
			           		//延时两秒刷新
			           		setTimeout(function (){
			           			showAtRight('/aftersale/care');
			           		}, 2000);

			           	}).catch(function(){
			           		//alert("删除失败！");
			           		_this.$message({
								type: 'error',
								message: '删除失败!',
								duration:3000,
								center: true
							});
			           	});	//这个是数据的初始化
				      },
				      downloadfile(){
				    	  window.location.href ="/aftersale/CareExcelDownloads";
				      }
				}
			})

		</script>
	</body>
</html>
